<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Command and Get Messages</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <h1>Send Command</h1>
    <form id="send-command-form">
        <div>
            <label for="userid">User ID:</label>
            <input type="text" id="userid" name="userid" required>
        </div>
        <div>
            <label for="prompt">Prompt:</label>
            <input type="text" id="prompt" name="prompt" required>
        </div>
        <button type="submit">Send</button>
    </form>
    <div id="result"></div>

    <h2>Get Messages</h2>
    <button id="show-all-images">Show All Images</button>
    <div id="image-container"></div>

    <script>
        const form = document.getElementById('send-command-form');
        const resultDiv = document.getElementById('result');
        const imageContainer = document.getElementById('image-container');
        const showAllImagesButton = document.getElementById('show-all-images');
        const pollingInterval = 5000; // 5 seconds
        let pollingId;

        form.addEventListener('submit', (e) => {
            e.preventDefault();

            const formData = new FormData(form);
            const userid = formData.get('userid');
            const prompt = formData.get('prompt');

            resultDiv.textContent = 'Sending command...';

            fetch('/send_command', {
                method: 'POST',
                body: new URLSearchParams(formData)
            })
            .then((response) => {
                if (response.ok) {
                    resultDiv.textContent = 'Command sent successfully.';
                } else {
                    resultDiv.textContent = 'Error: ' + response.statusText;
                }
            })
            .catch((error) => {
                resultDiv.textContent = 'Error: ' + error.message;
            });

            // Stop the previous polling and start a new one with the new user ID
            if (pollingId) {
                clearInterval(pollingId);
            }
            startPolling(userid);
        });

        function getMessages(userid, showAll = false) {
            fetch(`/get_messages?userid=${userid}`)
            .then((response) => response.json())
            .then((data) => {
                if (data.length) {
                    let imagesHTML = '';
                    if (showAll) {
                        data.forEach((message) => {
                            imagesHTML += `<img src="${message.URL}" alt="Image" style="max-width: 100%;"><br>`;
                        });
                    } else {
                        imagesHTML = `<img src="${data[data.length - 1].URL}" alt="Image" style="max-width: 100%;">`;
                    }
                    imageContainer.innerHTML = imagesHTML;
                } else {
                    imageContainer.innerHTML = 'No images found for this user ID.';
                }
            })
            .catch((error) => {
                imageContainer.innerHTML = 'Error: ' + error.message;
            });
        }

        function startPolling(userid) {
            pollingId = setInterval(() => {
                getMessages(userid);
            }, pollingInterval);
        }


       showAllImagesButton.addEventListener('click', () => {
            const userid = document.getElementById('userid').value;
            if (userid) {
                // Stop the polling when the button is clicked
                if (pollingId) {
                    clearInterval(pollingId);
                }

                getMessages(userid, true);
            } else {
                imageContainer.innerHTML = 'Please enter a user ID.';
            }
        });
    </script>
</body>
</html>
